/*
@desc:转账充值modal
@author:binlety
*/
import { Button, Typography  } from 'antd'
import CommonModal from '@/components/CommonModal';
import IconFont from '@/components/IconFont';
import styles from './index.module.less'

const { Paragraph } = Typography;

export default ({ bankDetail = {}, handleCancel })=> {

   const { name, bankNo } = bankDetail;

  return (
   <CommonModal
      title='转账充值'
      visible={true}
      onCancel={handleCancel}
      width='500px'
      footer={[<Button onClick={handleCancel} key='close'>关闭</Button>]}
   >
      <div className={styles.characterBox}>
         <div className={styles.characterItem}>
            <span>免</span>
            <h3>免手续费</h3>
         </div>
         <div className={styles.characterItem}>
            <span>秒</span>
            <h3>秒级到账</h3>
         </div>
         <div className={styles.characterItem}>
            <span>无</span>
            <h3>无限制</h3>
         </div>
         <div className={styles.characterItem}>
            <span>交</span>
            <h3>交易见证</h3>
         </div>
      </div>
      
      <div className={styles.content}>
         <p className={`common-color3 ${styles.title}`}>请用以下银行账户<span className='common-color9'>（仅限该账户）</span> </p>
         <div className={styles.description}>用户名：{name}</div>
         <div className={styles.description}>卡号：{bankNo}</div>
         <p className={`common-color3 ${styles.title}`}> 向以下银行账户转账</p>
         <div className={styles.description}>开户行：平安银行南京分行营业部</div>
         <div className={styles.description}>用户名：<Paragraph copyable>平安银行电子商务交易资金待清算专户（找家纺）</Paragraph></div>
         <div className={styles.description}>卡号：<Paragraph copyable>15000105895220</Paragraph></div>
         <div className={styles.tips}><IconFont type='iconjingshi' /> 提示：<span className='common-color9'>23:00 - 1:00 </span>系统维护，请勿转账！</div>
      </div>
</CommonModal>
  )
}
